<!DOCTYPE html>
<html>
<head>
	<title>onyx progressbar sample</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
	<style>
		.tools > * {
			margin: 8px 20px;
		}
		.dark {
			background-color: #626368;
		}
		.light {
			background-color: #cacaca;
		}
		.green {
			background-color: #91BA07;
		}
		.red {
			background-color: #C51616;
		}
	</style>
</head>
<body class="onyx">
	<script>
		new (enyo.kind({
			name: "App",
			classes: "enyo-unselectable tools",
			components: [
				{tag: "br"},
				{kind: "onyx.ProgressBar", showStripes: false, progress: 30},
				{tag: "br"},
				{kind: "onyx.ProgressBar", progress: 30},
				{tag: "br"},
				{kind: "onyx.ProgressBar", barClasses: "dark", progress: 30},
				{tag: "br"},
				{kind: "onyx.ProgressBar", barClasses: "light", progress: 30},
				{tag: "br"},
				{kind: "onyx.ProgressBar", barClasses: "green", progress: 30},
				{tag: "br"},
				{kind: "onyx.ProgressBar", barClasses: "red", progress: 30},
				{tag: "br"},
				{kind: "onyx.ProgressBar", progress: 50, animateStripes: false},
				{tag: "br"},
				{kind: "onyx.ProgressButton", progress: 50, components: [
					{content: "Blue progress..."}
				]},
				{kind: "onyx.ProgressButton", barClasses: "dark", progress: 50, components: [
					{content: "Dark progress..."}
				]},
				{kind: "onyx.ProgressButton", barClasses: "light", progress: 20, components: [
					{content: "0"},
					{content: "100", style: "float: right;"}
				]},
				{tag: "br"},
				{kind: "onyx.Slider", min: 10, max: 50, value: 30},
				{tag: "br"},
				{kind: "onyx.Slider", lockBar: false, progress: 20, value: 75},
				{tag: "br"},
				{name: "progressSlider", kind: "onyx.Slider", lockBar: false, value: 75},
				{kind: "onyx.Button", content: "Toggle Progress", ontap: "toggleProgress"}
			],
			toggleProgress: function() {
				this._progressing = !this._progressing;
				this.nextProgress();
			},
			nextProgress: function() {
				if (this._progressing) {
					enyo.requestAnimationFrame(enyo.bind(this, function() {
						this.incrementProgress();
						setTimeout(enyo.bind(this, "nextProgress"), 500);
					}), this.hasNode());
				}
			},
			incrementProgress: function() {
				var p = this.$.progressSlider;
				var i = p.min + ((p.progress - p.min + 5) % (p.max - p.min + 1));
				p.animateProgressTo(i);
			}
		}))().write();
	</script>
</body>
</html>
